<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Ajax练习</title>
    <link href="css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <script src="js/jquery-2.2.0.js"></script>
    <script src="js/jquery.form-3.51.0.js"></script>

    <style>
        body {
            font-family: "微软雅黑";
            font-size: 1.6em;
            color: #02177c;
            background: #b3d6ff;
        }
        a, .glyphicon {
            cursor: pointer;
            margin-right: 5px;
        }
        h3{
            text-align: center;
        }
        #resText, #resText2, #resText3{
            border:#666 1px solid;
            padding: 10px;
        }
        form{
            border: #f300ff inset 3px;
            padding: 10px;
            background: #d3e5ff;
        }

        textarea{
            max-width: 100%;
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <h1>Ajax练习</h1>
    <hr>
    <br>
    <h3>Ajax的POST方法</h3>
    <div class="row" >
        <div class="col-md-6 col-md-offset-3">
            <form action="#" id="form1">
                <div class="form-group">
                    <label for="username">用户名：</label>
                    <input class="form-control" id="username" name="username" value="马丁路德金">
                </div>
                <div class="form-group">
                    <label for="password">密码：</label>
                    <input class="form-control" id="password" name="password" type="password" value="马丁路德金">
                </div>
                <div class="form-group">
                    <label for="content">暗号：</label>
                    <textarea class="form-control" id="content" name="content">我有一个梦想。。。</textarea>
                </div>
                <input class="btn btn-success" id="send" type="submit" value="提交">
            </form>
            <br><br>
            <div hidden>
                <div class="well-sm"><b>以下是提交结果:</b></div>
                <div id="resText1"></div>
            </div>
            <hr>
            <form action="ajax/formJs" id="form2">
                <div class="form-group">
                    <label for="username">用户名：</label>
                    <input class="form-control" id="username2" name="username" value="daoke">
                </div>
                <div class="form-group">
                    <label for="password">密码：</label>
                    <input class="form-control" id="password2" name="password" type="password" value="mima">
                </div>
                <div class="form-group">
                    <label for="content">暗号：</label>
                    <textarea class="form-control" id="content2" name="content">I like oranges</textarea>
                </div>
                <input class="btn btn-success" id="send2" type="submit" value="提交">
            </form>
            <br><br>
            <div hidden>
                <div class="well-sm"><b>以下是提交结果:</b></div>
                <div id="resText2"></div>
            </div>

        </div>
    </div>
    <div style="height: 500px"></div>
</div>
<script>
$(function(){

	//ajaxSubmit比起ajaxForm，具有自动提交和跳转的功能，所以要写到提交事件内部，并阻止跳转。
    //这两个方法只有一个参数时可以是回调函数，也可以是个对象options.

//    $("#form1").ajaxForm(function(){
//        $("#resText1").html("ajaxForm提交成功！").show();
//    });
    $("#form1").submit(function(){
        $(this).ajaxSubmit(function(){
            $("#resText1").html("ajaxSubmit提交成功！").parent().show();
        });
        return false;
    })
    var $resText2 = $("#resText2");
    var options = {
        target:'#restext2',
        beforeSubmit:function(formData, jqform, options){
            $resText2.html("<h3>提交前的函数：</h3>"+$.param(formData)).parent().show();
            $resText2.append("<br>用户名是："+jqform[0].username.value);
        },
        success:function(responseText, statusText){
            $resText2.append("<h3>回调函数：</h3><strong>statusText：</strong>"+statusText+"<br>"+responseText)
        },
        dataType:'html',
        clearForm:true,//清空输入框内容
        error:function(){alert("error!!!")}
    }
    $("#form2").ajaxForm(options);
})

</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>